<template>
	<view class="wrap">
		<view class="total fw">
			<view class="total-T app_flex-aicjcsb">
				<view class="total-item">
					<view class="total-label">总收入（元）</view>
					<view>{{wallet.totalIncome}}</view>
				</view>
				<view class="total-TR app_flex-aicjcc" @click="onSkipTap('withdraw')">提现</view>
			</view>
			<view class="total-B app_flex-aicjcsb">
				<view class="total-item u-flex-1">
					<view class="total-label">已提金额（元）</view>
					<view>{{wallet.withdraw}}</view>
				</view>
				<view class="total-item u-flex-1">
					<view class="total-label">可提金额（元）</view>
					<view>{{wallet.balance}}</view>
				</view>
			</view>
		</view>
		<view class="item app_flex-aic app_arrow" @click="onSkipTap('accountDetails')">
			<view class="item-icon">
				<image src="../../static/images/icon-zhanghu.png"></image>
			</view>
			<view class="item-R">
				<view>账户明细</view>
				<view>资金收支记录</view>
			</view>
		</view>
		<view class="item app_flex-aic app_arrow" @click="onSkipTap('withdraw-record')">
			<view class="item-icon">
				<image src="../../static/images/icon-bankcard.png"></image>
			</view>
			<view class="item-R">
				<view>提现记录</view>
				<view>账户提现进度</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wallet: {
					totalIncome: 0,
					withdraw: 0,
					balance: 0,
				}
			}
		},
		onLoad(options) {
			this.$store.dispatch('updateUserInfo').then(() => {
				this.updatePage()
			})
		},
		methods: {
			updatePage() {
				this.getWalletInfo()
			},
			onSkipTap(type, index) {
				const urlObj = {
					withdraw: '/pages/wallet/withdraw',
					accountDetails: '/pages/wallet/accountDetails',
					'withdraw-record': '/pages/wallet/withdraw-record',
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			getWalletInfo() {
				this.$g_api.accountWallet().then(({
					data
				}) => {
					this.wallet = data
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.wrap {
		padding: 50rpx 30rpx;
	}

	.total {
		// height: 280rpx;
		line-height: 1;
		padding: 30rpx 30rpx 30rpx 40rpx;
		box-sizing: border-box;
		margin-bottom: 66rpx;
		background: linear-gradient(90deg, #3377FF, #66A6FF);
		box-shadow: 0px 6rpx 14rpx 0px rgba(51, 119, 255, 0.3);
		border-radius: 16rpx;
		font-size: 36rpx;
	}

	.total-label {
		font-size: 24rpx;
		margin-bottom: 24rpx;
		color: #CCDFFF;
	}

	.total-T {
		margin-bottom: 48rpx;
	}

	.total-item {}

	.total-TR {
		width: 160rpx;
		height: 70rpx;
		border-radius: 36rpx;
		font-size: 26rpx;
		color: $g-main-color;
		background-color: #fff;
	}

	.total-B {}

	.item {
		height: 160rpx;
		margin-bottom: 20rpx;
		padding: 34rpx 30rpx;
		border-radius: 10rpx;
		background-color: #f5f5f5;

		&::after {
			right: 36rpx;
		}
	}

	.item-icon {
		margin-right: 30rpx;
		font-size: 0;

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}

	.item-R {
		view {
			&:first-child {
				margin-bottom: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			&:last-child {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>
